<!-- 模拟一个输入框同时输入两个内容 -->
<!-- 基本用在 搜索功能中 例如 货代 -> 求租箱需求 搜索 等等.... -->
<template>
    <div class="home-container">
        <div>{{ props.title }}</div>
        <div class="input-container">
            <!-- <el-input v-model="param.inputVal1" placeholder="提箱城市" class="custom-input" @change="inputChange"/>
            <img src="/src/assets/icons/svg/right.svg" style="width: 15px;" >
            <el-input v-model="param.inputVal2" placeholder="还箱城市" class="custom-input" @change="inputChange"/> -->
            <el-select v-model="param.inputVal1" clearable filterable remote collapse-tags :multiple="props.inputBoxConfig.multiple" reserve-keyword :placeholder="props.inputBoxConfig.placeholder1" :remote-method="getCarryCityList" @change="inputChange">
                <el-option v-for="(item,index) in param.carryCityOptions" :key="index" :label="item.cityCName" :value="item.id"/>
            </el-select>
            <img src="/src/assets/icons/svg/right.svg" style="width: 15px;" >
            <el-select v-model="param.inputVal2" clearable filterable remote collapse-tags :multiple="props.inputBoxConfig.multiple" reserve-keyword :placeholder="props.inputBoxConfig.placeholder2" :remote-method="getReturnCityList" @change="inputChange">
                <el-option v-for="(item,index) in param.returnCityOptions" :key="index" :label="item.cityCName" :value="item.id"/>
            </el-select>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive,watch } from 'vue'
// import citySelect from '@/components/citySelect'
import { getCity } from '@/api/system/city'; // 引入城市接口 
import { ElMessage } from 'element-plus'

const emit = defineEmits(['inputChange'])
const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    inputVal1:{
        type: String,
        default: ''
    },
    inputVal2:{
        type: String,
        default: ''
    },
    inputBoxConfig: {
        type: Object,
        required: true,
        default: () => ({})
    }
})
const param = reactive({
    inputVal1: props.inputVal1,
    inputVal2: props.inputVal2,
    carryCityId: "",
    returnCityId: "",
    carryCityOptions:[],
    returnCityOptions:[]
})


watch(() => [props.inputVal1, props.inputVal2], ([newVal1, newVal2], [oldVal1, oldVal2]) => {
    if(newVal1 != oldVal1){
        param.inputVal1 = newVal1
    }
    if(newVal2 != oldVal2){
        param.inputVal2 = newVal2
    }
});
const inputChange = () => {
    emit('inputChange', param.inputVal1, param.inputVal2)
}

// 根据输入的值 获取提箱城市列表
const getCarryCityList = async (val:any) =>{
    if (!val) return  ElMessage.warning('请输入城市名称')
    getCity(JSON.stringify({ cityCName: val })).then(res => {
         // param.carryCityOptions = res.data
        let arr = [...param.carryCityOptions,...res.data]
         param.carryCityOptions = [...new Map(arr.map(item => [item.id, item])).values()];
        // console.log()
    }).catch(err => {
        console.log("ERROR:", err)
    })
}
// 根据输入的值 获取还箱城市列表
const getReturnCityList = (val:any) =>{
    if (!val) return  ElMessage.warning('请输入城市名称')
    getCity(JSON.stringify({ cityCName: val })).then(res => {
        // param.returnCityOptions = res.data
        let arr = [...param.returnCityOptions,...res.data]
         param.returnCityOptions = [...new Map(arr.map(item => [item.id, item])).values()];
    }).catch(err => {
        console.log("ERROR:", err)
    })
}

</script>

<style lang="scss" scoped>
.home-container {
    width: 100%;
}

.input-container {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 5px;
}


.input-container :deep(.el-select__tags-text) {
  display: inline-block;
  max-width: 60px; /* 根据实际情况调整宽度 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:deep(.el-input__wrapper) {
    box-shadow: none !important;
    height: 30px;
    // border-radius: 0;
}
:deep(.el-select__wrapper) {
    box-shadow: none !important;
    height: 30px;
    // border-radius: 0;
}

</style>